<template>
	<div id="root">
	<nav-bar>
		<div slot="left">
			<div id="logo" style="width: 60px;">
				<img src="../../../public/jesus.png" style="width:100%"/>
			</div>
		</div>
		<div slot="right" class="right">
			<avatar v-show="this.common.isLogin" class="avatar">
				</avatar>
		</div>
	</nav-bar>
	<el-container style=" border: 1px solid #eee; width: 90%; margin: 0 auto;">
	  <el-aside width="225px" style="background-color: rgb(238, 241, 246)">
	    <el-menu :default-openeds="['1', '3']">
			<div @click="Publish">
		  	<el-button type="primary" style="margin: 20px 0;">写文章</el-button>
		  </div>
	      <el-submenu index="1">
	        <template slot="title"><i class="el-icon-message"></i>内容管理</template>
	        <el-menu-item-group>
	          <el-menu-item index="1-1" >文章管理</el-menu-item>
	        </el-menu-item-group>
	      </el-submenu>
	    </el-menu>
	  </el-aside>
	  
	  <el-container>
	    <el-header style="text-align: right; font-size: 12px; background-color: #fff; " >
	      <div style="float: left ;">
	      		<el-tabs v-model="activeName" @tab-click="handleClick">
	      		    <el-tab-pane label="文章" name="first"></el-tab-pane>
	      		    <el-tab-pane label="草稿箱" name="second"></el-tab-pane>
	      		</el-tabs>
	      </div>
		  <div style="float: right;">
			  <el-input
				  style="margin-right: 15px"
			      placeholder="请输入内容"
			      v-model="search"
				  @keyup.enter.native="toLook"
				  >
			      <i slot="prefix" class="el-input__icon el-icon-search"></i>
			    </el-input>
	      </div>
	    </el-header>
	    <el-main>
			<el-table :data="tableData" 
					ref="serveTable"
					:header-row-style="{height:'60px'}"
					:row-style="{height:'87px'}"
				    :cell-style="{padding:'0px'}"
				    style="font-size: 15px ;font-weight: 400px; color: #1d2129;"
					>
			  <el-table-column prop="title" label="文章标题" width="240">
				  <template slot-scope="scope">
				    <div @click="jumpToDetail(scope.row)" style="cursor: pointer;">{{ scope.row.title }}</div>
				  </template>
				</el-table-column>
				<el-table-column prop="pub_date" label="创作日期" >
					<template slot-scope="scope">
					  <div @click="jumpToDetail(scope.row)" style="cursor: pointer;">{{ scope.row.pub_date }}</div>
					</template>
				</el-table-column>
				<el-table-column width="120">
				    <template slot-scope="scope">
				       <el-dropdown style="float: right; font-size: 24px;">
				               <i class="el-icon-more" style="margin-right: 15px"></i>
				               <el-dropdown-menu slot="dropdown">
				                 <el-dropdown-item @click.native="toEdit(scope.row)">编辑</el-dropdown-item>
				                 <el-dropdown-item @click.native="toDel(scope.row)">删除</el-dropdown-item>
				               </el-dropdown-menu>
				             </el-dropdown>
				    </template>
				</el-table-column>
				</el-table>
	    </el-main>
	  </el-container>
	</el-container>
	</div>
</template>

<script>
	import NavBar from 'components/common/NavBar.vue'
	import avatar from 'components/common/avatar.vue'
	import { getArticles } from 'network/getArticles.js'
	import { Delete } from 'network/articlemag.js'
	import { toLookfor } from 'network/home.js'
	
	export default{
		name:"Profile",
		components:{
			NavBar,
			avatar,
		},
		data(){
			  return {
					  item: [],
					  search:'',
					  sideActive:1,
					  activeName:'first',
			          tableData: [],
					  cur_Id: 0,
			      }
		    },
		inject:["reload"],
		methods:{
				updateData(){
			        this.reload()
			    },
				handleSelectionChange(val) {
			            this.multipleSelection = val;
			        },
			    handleClick() {
			        if(this.activeName=='first')
						getArticles(this.common.token).then(res=>{
							this.tableData=res.data
						})
					else
						getArticles(this.common.token,'草稿').then(res=>{
							this.tableData=res.data
						})						
			      },
			  Publish(){
				  this.$router.push('/publish')
			  },
			  jumpToDetail(row) {
				this.cur_Id = row.Id
				this.$router.push('/detail/'+row.Id)
			  },
			  toEdit(row){
				  this.common.flag = row.Id
				  this.$router.push({
					  path:'/edit',
					  query:{
						  Id:row.Id,
						  }
				  })
			  },
			  toDel(row){
				  Delete(row.Id).then(res=>{
					console.log('删除')
					this.$message({
					         message: '文章删除成功!',
					         type: 'success'
					       });
					this.reload()
				  })
				  
			  },
			  toLook(){
				  let state='已发布'
				  if(this.activeName!='first')
					state='草稿'
				  toLookfor(this.search,state,this.common.isLogin,this.common.token).then(res=>{
					  this.tableData = res.data
				  })
			  }
		},
		created(){
			getArticles(this.common.token).then(res=>{
				this.tableData=res.data
			})
		}
	}
</script>

<style scoped="scoped">
	#nav-bar{
		display: flex;
		height: 80px;
		background-color: white;
		border-bottom: 1px solid #f1f1f1;
		box-shadow:-10px -10px 15px;
		margin-bottom: 20px;
	}
	.avatar{
		padding-top: 10px;
	} 
	#logo{
	  	margin-top: 5px;
	  }
	.el-header {
	    background-color: #B3C0D1;
	    color: #333;
	    line-height: 60px;
	  }
	 
	  .el-aside {
	    color: #333;
	  }
</style>
